Design System

Every token, asset and component the Abzorb customer record is built from. Anything marked live can be edited here and the change follows onto the Dashboard, Connections, Usage, Invoices — every page — the moment it loads.

0 overrides live

Colour tokens

Declared in every page's inline :root block. The five brand colours and the ink/surface set are editable — --magenta-d, --cyan-d, --chart-d and --line-2 are derived automatically from their base.

page :root · theme-engine.jslive

Ink, surfaces & borders

Light mode only. Dark mode replaces the whole set from dark-mode.js, so edits here never leak into it.

dark-mode.js owns the dark counterpartslive

Typography scale

Two families only: ITC Avant Garde Gothic for display, titles, table body and buttons; Nunito for labels, column headers and UI text. Sizes are fixed in title-font.css; the families are live.

.cname h1 — ITC 700 / 20px

Grey Team Communications Limited

.card .ch h3 — ITC 700 / 14px

Account Revenue

.kpi .val — ITC 500 / 23px

£5,490.00

.table tbody td — ITC 500 / 12px

07700900512 · Mobile · Brighouse

.frow .k — Nunito 700 / 12px

Account Manager

.table thead th — Nunito 700 / 10px

Connection · Tariff · Cost

.cname h1.card .ch h3.kpi .val.frow .ktitle-font.cssfamilies live

Shape, elevation & density

Radius — --r

999px pill

--rlive

Elevation

Cards, tiles and buttons are flat in both themes — box-shadow:none is enforced site-wide. Only overlays, menus and popovers carry a shadow.

page-transitions.css

Control height

Every control in a table toolbar rail is 38px tall on every page, so the rail reads as one band. Row density is user-controlled per table.

page-transitions.cssrow-density.js

Icons 0

One inline SVG sprite per page, 1.8px stroke, currentColor. Click any icon to copy its <use> markup.

svg.icon > use[href="#i-…"]page sprite · unicons-shim.js

Buttons

One button language across every toolbar, modal footer and row action. Neutral buttons change background only on hover — the border never deepens.

Edit

.btn.btn.cyan.btn.ghost-cyan.btn.iconbtn.actbtn.tknext.editpage-transitions.css · title-font.css

Fields, selects & checkboxes

Site name

File type

Placeholder state

.fldinputselecttitle-font.css

Upload details to the bank? Include payments Show chargeable items only Tariff Change SIM Change

.search.echk.ipsw.tkopttitle-font.css

Tables

Nunito 10px uppercase column band on #F1F3F5, ITC 500 12px body cells, zebra stripe on even rows, right-aligned tabular numbers, and a trailing icon action.

Connections

4Show 10 entries

Connection	Tariff	Status	Minutes	Cost
07700900512Sandra Achterberg · Brighouse	Abzorb Flex 20GB	Active	486	£28.40
07700900518Marc Delaney · Leeds	Abzorb Flex 5GB	Renews 90d	212	£17.10
07700900524Spare · Brighouse	Data only 2GB	Ceased	0	£0.00
07700900531Ops pool · Halifax	Abzorb Flex 20GB	Pending	64	£24.00

Showing 1–10 of 78

…

.table.sectoolbar.tcount.c2l / .u2.actbtn.pgbar / .pgbtitle-font.css · pagination.js · row-density.js · entries-select.js

Cards & KPI tiles

Total Cost

£5,750.80+4.2%

This month · vs £5,518.10

Connections

179−1.1%

Across 7 products · 3 sites

Open Tasks

Oldest raised 11 Aug 2026

Company Details

Edit

Account Number124122

Account ManagerJason Dysonian

Registered AddressUnit 4, Brighouse, HD6 1QF

Status pills

Active Bureau Mobile In service Review Kit invoice Hosted Draft PDF 3 3

.pill / .statuspill.lim.ok|.warn|.cap|.info.tint-*.filecat.dchip

.kpi.kpi .delta.card > .ch / .cb.frow .k / .vtitle-font.css

Tabs, sub-tabs & segmented

.tabs .tab / .tab.active.subtab.active.seg button.onpage-transitions.css

Modals, toasts & popovers

Every modal shares the same anatomy: 5px orange strip, ITC 700/16px title over an ITC 500/14px customer subtitle, and a single full-width primary action that stays disabled until the form is valid.

Direct Debit Setup

Grey Team Communications Limited

Authorised signatory

The mandate request will be sent to Sandra Achterberg.

Direct Debit request sent

View Itemised Usage

Bundles

Data 20GBActive

UK MinutesUnlimited

SMS 5,000Active

.tkov / .tkmodal / .tkstrip.toastwrap .toast[data-tip].popmodal-guard.js · actbtn-tip.js

Chart & data-viz colours

Series colours come from the same brand tokens, so a brand edit re-colours every chart, donut and legend on the site.

Service charges Call charges Kit invoices Bundles

.seg-s / .seg-c / .seg-k.donut .ring.chart-tiplive via brand tokens

Table toolbar rail

Title · count pill · selection info · then controls, right-aligned, all 38px tall. Computed padding is 16px 20px 10px (12px 16px 8px under desktop density) and the filter-tag row sits directly beneath it.

Invoices

64Show 10 entries

Status · OutstandingDate · 01/06/2026 - 30/06/2026

No invoices for the selected period

Clear a filter or pick another billing period.

.sectoolbar.filtertags .ftag.uemptytable-filters.js · table-search.js · export-btn.js · desktop-density.css

Two-line cell

Used wherever two facts belong to one column — Created By (name over date), Activity Date (date over time), Updated By (email over timestamp).

Created By	Activity	Updated By
Jason Dysonian11 Aug 2026 · 09:24	Meraki uplink note 11018907	j.dysonian@abzorb.co.uk11 Aug 2026 · 09:31
Sandra Achterberg03 Aug 2026 · 14:02	NETWORK QUERY 11019996	s.achterberg@greyteam.co.uk03 Aug 2026 · 14:10

.c2l.c2l .u2

Page anatomy

Every record page stacks the same layers, so the chrome is pixel-identical between pages and never blinks on navigation.

Layer	Class	Owned by
Left nav	`.side .nav`	page inline style
Top rail	`.topbar .crumb`	page + dark-mode.js
Record sheet	`.sheet`	page inline style
Accent bar	`.accent`	theme-engine.js live
Customer header	`.chead .cname h1`	page + mobile.css
Primary tabs	`.tabs .tab`	page-transitions.css
Sub-tab rail	`.subtabs .subtab`	page inline style
Body	`.body`	page-transitions.css (fade-in)

Logos

Two files only. Dark mode swaps the source (never a CSS filter — a filter flattens the gradient z).

assets/abzorb-logo-color.svg.tblogo · light

assets/abzorb-logo-white.svg.brand .logo · dark

Fonts

ITC Avant Garde Gothic

Titles, KPI figures, tables

Buttons, tabs, field values

Book weight

assets/itc_avant_garde_gothc_bold.ttf…gothic_med.ttf…gothic_book.ttftitle-font.css

Nunito

Labels & column headers

Body UI text and inputs

Google Fonts · 400–800title-font.css

Shared files

Edit one of these and every page follows on next load. Anything page-specific lives in that page's own inline <style>/<script>.

File	Owns
theme-engine.js	Every live override on this page — tokens, fonts, accent bar, nav treatment
page-transitions.css	View transitions, 38px control rail, flat surfaces, border contract, dark-mode text
title-font.css	All typography, checkboxes, count pills, table header band, zebra stripe
mobile.css	Phone chrome: compact header, pill tabstrip, Actions dropdown
desktop-density.css	Tighter rails and padding below 1380px
dark-mode.js	Dark palette + the moon toggle, on every page
table-filters.js · table-search.js · pagination.js · row-density.js · entries-select.js · export-btn.js	Shared table behaviour
modal-guard.js · modal-select.js · actbtn-tip.js	Modal validation, styled selects, icon-button tooltips